import 'ol/ol.css';

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Icon from 'ol/style/Icon';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import Feature from 'ol/Feature';
import Stroke from "ol/style/Stroke";

import { data } from "./problemData"

import { getScaleFactor } from "@src/utils/OpenlayersCommon.js";

const CENTER = [0.0, 0.0];
const MAP_DEFAULT_ZOOM = 20.0;

// 计算中心点
// 处理数据
const viewpointCenter = [0.0, 0.0];
const points = [];
data.forEach(rect => {
    const point1 = rect[0];
    const point2 = rect[1];
    const point3 = rect[2];
    const point4 = rect[3];

    // points.push(point1, point2, point3, point1, point3, point4);
    points.push(point3, point2, point1, point4, point3, point1);

    viewpointCenter[0] += point1[0];
    viewpointCenter[1] += point3[1];
});
const flat = points.flat();
const numberofRect = data.length;
console.log(flat, numberofRect);
viewpointCenter[0] /= numberofRect;
viewpointCenter[1] /= numberofRect;

CENTER[0] = viewpointCenter[0];
CENTER[1] = viewpointCenter[1];

// viewport-offset
CENTER[0] += 20;

const itemValue = data;

/** 初始化openlayers地图 */
const initOpenlayers = (id) => {
    const map = new Map({ target: id });
    const view = new View({ projection: "EPSG:3857", center: CENTER, zoom: MAP_DEFAULT_ZOOM, });
    map.setView(view);
    return { map, view };
}


import polygonClipping from "polygon-clipping";
import hull from "@src/module/convexhull/hull/hull.js";

export const initialize = (id) => {
    const { map, view } = initOpenlayers(id);
    const vectorSource = new VectorSource();
    const vectorLayer = new VectorLayer({ source: vectorSource });
    map.addLayer(vectorLayer);

    let gpu_step = performance.now();
    vectorLayer.on('postrender', (event) => {
        console.log(performance.now());
    });


    // 视点
    const feature = new Feature();
    const point = new Point(CENTER);
    feature.setGeometry(point);
    vectorSource.addFeature(feature);

    const _polygon = [];
    const _rects5 = [];
    const _rects4 = [];
    const _point1 = [];
    const _point2 = [];
    const _point3 = [];
    const _point4 = [];
    for (let i = 0; i < itemValue.length; i++) {
        const point1 = itemValue[i][0];
        const point2 = itemValue[i][1];
        const point3 = itemValue[i][2];
        const point4 = itemValue[i][3];
        _rects5.push([point4, point3, point2, point1, point4]);
        _rects4.push([point4, point3, point2, point1]);
    }

    const cpu_step1 = performance.now();

    //////////////////////////////////////////////////////////////////////////
    // 重复首尾
    // 出现问题的仅仅是第一个或者最后一个矩形, 因此重复第一个和最后一个矩形, 让其绘制两次
    _rects5.push(_rects5[0]); // 添加重复第一个
    const last_rect = _rects5[_rects5.length - 1];
    _rects5.push(last_rect) // 添加重复最后一个
    const cpu_tick1 = performance.now();

    // https://github.com/mfogel/polygon-clipping
    const params = [];
    _rects4.forEach(item => params.push([item]))
    const _rectp = polygonClipping.union(...params);
    const cpu_tick2 = performance.now();

    // https://github.com/AndriiHeonia/hull
    const points = _rects4.flat();
    // const hulled = hull(points, Infinity);
    const hulled = hull(points, 15);
    const cpu_tick3 = performance.now();

    //////////////////////////////////////////////////////////////////////////

    console.log("cpu计算阶段: 接口到数组转换");
    console.log(`重复首尾 ${cpu_tick1 - cpu_step1}`);
    console.log(`boolean Polygon clipping ${cpu_tick2 - cpu_tick1}`);
    console.log(`convex hull ${cpu_tick3 - cpu_tick2}`);
    console.log(``);

    let cpu_step2 = performance.now();
    let cpu_tick_arr = [undefined, undefined, undefined];
    const draw = ["1"];
    const stroke = new Stroke({ color: "#FF0000FF", width: 1 });
    const style = new Style({ fill: new Fill({ color: "#FFFF00AA" }) });
    console.log("cpu计算阶段: Opelayers框架将数组整理为自己对应的渲染指令");
    draw.forEach((item, index) => {
        setTimeout(() => {
            //////////////////////////////////////////////////////////////////////////
            const feature = new Feature();
            let polygon = undefined;
            if (item === '1') polygon = new Polygon(_rects5);
            else if (item === '2') polygon = new Polygon(..._rectp);
            else if (item === '3') polygon = new Polygon([hulled]);;
            feature.setGeometry(polygon);
            feature.onceInternal("render", () => {
                console.log(1);
            });
            style.setStroke(stroke);
            feature.setStyle(style);
            vectorSource.addFeature(feature);
            //////////////////////////////////////////////////////////////////////////

            if (!cpu_tick_arr[item]) cpu_tick_arr[index] = performance.now();
        }, 200);
    });


    // draw.forEach((item, index) => {
    //     if (item === "1") console.log(`重复首尾 ${cpu_tick4 - cpu_step2}`);
    //     if (item === "2") console.log(`重复首尾 ${cpu_tick4 - cpu_step2}`);
    //     if (item === "3") console.log(`重复首尾 ${cpu_tick4 - cpu_step2}`);
    // });
};